After covering the electron API and looking at some additional features and techniques, we're now ready
to build an electron up using what we've learned.
Of course, we won't be able to use every single module we've covered in the course.
But the simple project I've prepared for this section does cover all the key modules and will allow
you to use them in a more practical, real world application.
This then being the single most important section of the course.
So be sure to follow along.
And should you get stuck anywhere, the relevant lessons final code will be linked in the lesson resources
or in the project code repo.
OK, so with that said, let's take a look at what we'll be building.
The project I've prepared is a simple bookmarking app that will allow us to save links and read them
directly from the app.
This is extremely simple, but rather than build a big, complicated app, the small application will
cover a lot of very important techniques for putting all the electron modules together.
We'll also spend a significant amount of the project refining basic features to make the app integrate
with the desktop environment perfectly.
The starting point for our app is as before the QuickStart project we've used throughout.
Note, however, that I will be using plain JavaScript access only no helper libraries or frameworks.
Picking a JavaScript framework or CSS compiler will simply detract from the project, not to mention
the sheer number of frameworks there is to choose from.
Chances are my framework of choice isn't yours.
So we'll stick to vanilla code, which will allow you to pair what you've learned with your own framework
of choice to begin.
Then I'll clean up a few of the files and directories in there, start a project.
Remember, the app we're building will be packaged in the next section, so we don't want to leave anything
unnecessary.
First file we can get rid of being the Slashdot PNG image.
The README.
And this lessons directory keeping in mind that you'll find the final code for each of these project
lessons in this directory, so maybe keep a copy for yourself or clone a new copy from the repo, then
in terms of the project's directory structure, I'll again keep it very simple.
Everything related to the main process will reside in this root project directory, and everything related
to the Renderer process will go in a subdirectory called Renderer.
We can create that directory.
Moving into it, index dot, HTML and Renderer DOT, the only two files we have relating to the Renderer
process right now.
I'll also rename these files to fit the structure that better make indexed on HTML Maeng HTML, referring
to being the content for the main window.
By no means a requirement, just my own logic and renderer dodgiest to update JS as this will contain
the main app logic.
On the Renderer side, we can also add a stylesheet for this main content main DOCSIS.
Next, we can update the references to these files in May, not HTML open that file, changing first.
This require statement to now include apologies instead of Renderer, as we've renamed it.
No need to actually include the extension.
Change the title of this main window to read it, the name of the app.
And link your new stylesheet.
Main DOCSIS.
We've also renamed this file from indexed on HTML to Main Dot HDMI.
So update the main process to load the new file as the main windows content main window load file renderer
slash main dot html.
Let's make sure all our changes are working.
Save this and the uploads without any errors.
Now, being a production app, one of the very first things we'll want to add is state management for
this main app window.
Right now it's being launched at those specified dimensions in the center of the screen every time.
So to have the window keep its size and position, we can add and configure the electron window state
module.
We've already covered this in an earlier lesson, so I'll run through it a bit faster, install the
module as a production dependency with NPM I Electron Windows State Electron will add a module as a
production dependency by default if it's not explicitly stated that's done.
So restart the watch command.
And if we check in package that Jason.
They're always good to make sure the package is listed as this will get bundled when we eventually bolt
for release back to not always start by requiring the Windows tight module const window state keepa
equals require electron window state.
Copy this module export, and right at the start of the create window function, we can configure our
state keepa.
Let state equals window state keeper passing in an object for the default window size and bounds, I
have, of course, already built this up in preparation for these lessons.
So I have some scissors that will work well, default Width said to 500 and default height to six fifty.
No need to specify default X and Y coordinates as this default to the center of the screen anyway.
Then to use the persistent states when the main window gets created, said the Windows X coordinate
two state dot x and Y to state dot y width being state width and height, two state dot height.
So we're using the default X and Y coordinates, initially being the center of the screen.
But then once they change, we still want to keep the new window position, hence adding the state bouncier
X and Y.
I'm also going to enforce some limits to the size of this main window setting minimum width to three
fifty.
Maximum width to 650 and minimum height to 300, the size limits will make more sense once we have the
app working.
Essentially, we don't want it to be reduced to nothing, which is where the minimum width and height
come in.
And we also don't want to get too wide as the list of links the app will contain won't look right in
a wide format.
Then, with our window state configured, the final step is to tell this window state keepa instance
which window to manage.
State dot manage main window.
Save this.
I'll separate this dev tools window.
I can now move this into place for the remainder of this project section.
And to persist this new size and position, the up as that's what will trigger a state update in the
module.
OK, so a window state is now handled.
Next, we can add the basic HTML structure of this main window.
Now, I will be going a bit fast in adding the HTML structure, but remember, you can find the HTML
for this lesson in the lesson resources.
Otherwise feel free to just add along with me.
I'll start by replacing this H1 with a header tag.
This will be the only small control area of the app.
Add a button which will use to add items to the app.
The button text can be a plus character to indicate adding something and remember, we'll be using vanilla
JavaScript to select these elements.
So assign an ID of show model.
This will again have a bit more meaning in a minute.
Basically, clicking the add button will present a model to input the link we want to save.
Then still in the header, the second and only other element being a text input with an ID of such as
this will be used to search Safet items, setting some placeholder text of search.
Then on the main app content being our saved items, I'll use a main tag.
The semantic HTML five tags won't really have any meaning in an electron app, but it still provides
a bit of structure and logic when reading the code at a container in this main tag to hold our items,
ID items and also in this main tag separate from the items, said some text, which will only be visible
when no items exist.
No items giving this paragraph tag an ID of no items.
As mentioned, when we click, this plus sign will want to present a simple modal overlay to input and
add the item.
So create that model A div with an ID of modal, giving this model a text input for the items you are
r-al id you R-AL with some placeholder text of enter your URL, then a button to confirm or add that
you are all entered id add item.
Same for the button text and lastly, a second button with which to cancel or close this model idy close
model with button text, cancel that set for our app HTML.
So save this.
Reload the main window.
And there are no items at the moment with a button to show this Model S. year and an input to search
any SAFET items, we can add the styles for this next in May.
DOCSIS I'll start by setting 100 per cent height on both HTML and body tags, then styling the body
tag alone, set the font to match that of the operating system with font caption Remove any default
margins on the body element and set this body element to have a display of flex.
This is, of course, referring to the CCWs flex box model, something we can comfortably use without
any worry about browser support as we are running in the latest chromium browser.
If you're not familiar with Fleck's box, I've linked to a small tutorial in the lesson resources.
This will just allow us to dynamically arrange child notes of this body element, a much better solution
than using percentages or floats.
Next, I'll set some default button styles, setting a background color of Dodger blue.
Text color white.
Border radius of five pixels.
So just rounding our bottom corners alphabet, no actual border font size of 20 pixels and no outline
something chromium will also add by default same default styles for inputs with the same font size as
buttons, 20 pixels, same border radius.
But setting an actual border of one pixel, solid silver.
Padding to zero top and bottom and 10 pixels left and right, we can also style the placeholder text
inside of our inputs using the placeholder modifier, giving that text a color of light gray.
So that's some default styles then to move on to specific elements.
I'll start with the header tag background light gray.
Display also flex, as we can use flex box for the button and then put inside of this header padding
of 10 pixels, font weight bold.
With a bottom border to separate slightly from the items in the main content, one pixel silver.
And a bit of shadow again to help with that separation from the main content.
Then moving to the elements inside of this header, starting with the plus button or add button, I'd
show modal.
This button here.
Said some padding again, pretested values here, nothing at the top, 12 pixels left and right and
five pixels on the bottom 10 pixels of right margin.
And slightly bigger font than the standard button font at 30 pixels, next, the search input in the
header.
This already has some styling from the input selector appear, but to have it take up the remainder
of its parent element, this header assign it a flex grow value of one, save this, reload the main
window or do the same for this item's container.
But instead of having it grow in words, I'll have it take up the remaining height under the header,
meaning we'll have to make the parent container a flex column instead of a row setting on the body aliment
flex flow column.
Save this reload there, we now have that at the top, then the items and right at the bottom, this
modal window, which we still need to style and hide.
Before doing that, I'll improve this.
No items, text, bird ID, no items.
Font weight bold.
Carlos Silva.
Center line at.
With 100 per cent worth and to make sure our items, once we add some, is on top of this message,
so essentially hiding it set this to have a position of absolute at 100 pixels from the top of its parent
container and a Z index of minus one, setting it to always be at the back onto the model.
Then we want this to overlay the entire app when open.
So set it to also be absolutely positioned with 100 percent.
I 100 percent with a slightly transparent black background color using eBay of zero zero zero or black
and a transparency of nought point eight five display flex so we can use the flex box on the elements
inside of this model.
A line items to the center being any flex items inside of this model also align content to the center
with flex rep to wrap meaning led items rep to a new line.
When it gets too wide, we can check this reload getting there.
The model is fine.
Just need to finalize these elements.
And of course, once we have this ready, will want the model to be hidden.
So display none, which I leave commented out for now so we can test it with this display flex property
instead, which is what will apply when showing the modal style.
The Ural input ID humoral again flex grow to one meaning take up all the available space which with
this flex wrap set to wrap, will be 100 percent of the modal container if available.
Also said the width explicitly to 100 percent.
Some margins to space it out of it.
Zero top 25 left and right and 15 pixels bottom worth.
Lastly, some padding, 10 pixels, then the modal buttons.
Both can get some padding, 10 pixels, target the cancel button.
Next, I'd close modal background white.
With black text and space it away from the add button on its left by 15 pixels, lastly, the add button.
I'll just offset this from the side of the model by the same 25 pixels as the input.
Save this, reload the app, and that's what our model will look like when opened with the plus button
in the Apsara, we can now hide the model, enable this display property, save and reload again.
There is a simple message telling us we have no items at the moment and all the user interface ready
for us to start connecting with some event in the next lesson.